
<script setup>
import { ref, onMounted } from 'vue';
import { ElNotification } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import { AddInterestTag, FetchInterests, RemoveInterestTag, UpdateInterestTag } from '@/api/index.js';

const interests = ref([]);
const newInterest = ref('');
const editingInterestId = ref(null);

// 获取兴趣列表
const fetchInterests = async () => {
  try {
    const response = await FetchInterests();
    interests.value = response;
  } catch (error) {
    console.error('获取兴趣列表失败:', error);
    ElNotification({
      title: 'Error',
      message: '获取兴趣列表失败',
      type: 'error',
    });
  }
};

// 添加兴趣
const addInterestTag = async () => {
  if (!newInterest.value) return;

  const existingInterest = interests.value.find((interest) => interest.hobby_tag === newInterest.value);
  if (existingInterest) {
    ElNotification({
      title: 'Warning',
      message: '兴趣已存在，请输入新的兴趣',
      type: 'warning',
    });
    return;
  }
  try {
    const response = await AddInterestTag({hobby_tag: newInterest.value});
    interests.value.push(response); // 添加到前端列表
    newInterest.value = '';
    ElNotification({
      title: 'Success',
      message: '添加成功',
      type: 'success',
    });
    await fetchInterests();
  } catch (error) {
    console.error('添加兴趣失败:', error);
    ElNotification({
      title: 'Error',
      message: '添加兴趣失败',
      type: 'error',
    });
  }
};

// 删除兴趣
const removeInterestTag = async (interest) => {
  try {
    await RemoveInterestTag(interest.id);
    interests.value = interests.value.filter((item) => item.id !== interest.id); // 从前端列表移除
    ElNotification({
      title: 'Success',
      message: '删除成功',
      type: 'success',
    });
    await fetchInterests();
  } catch (error) {
    console.error('删除兴趣失败:', error);
    ElNotification({
      title: 'Error',
      message: '删除兴趣失败',
      type: 'error',
    });
  }
};

// 修改兴趣
const updateInterestTag = async (interest) => {
  editingInterestId.value = null;
  try {
    await UpdateInterestTag(interest.id, {hobby_tag: interest.hobby_tag});
    ElNotification({
      title: 'Success',
      message: '修改成功',
      type: 'success',
    });
    await fetchInterests();
  } catch (error) {
    console.error('修改兴趣失败:', error);
    ElNotification({
      title: 'Error',
      message: '修改兴趣失败',
      type: 'error',
    });
  }
};

const editInterest = (interest) => {
  editingInterestId.value = interest.id;
};

onMounted(() => {
  fetchInterests();
});
</script>
<template>
  <div class="interest-tags">
    <h3>兴趣标签</h3>
    <el-tag
        v-for="interest in interests"
        :key="interest.id"
        type="info"
        closable
        @close="() => removeInterestTag(interest)"
    >
      <span v-if="!editingInterestId || editingInterestId !== interest.id" @click="editInterest(interest)">
        {{ interest.hobby_tag }}
      </span>
      <el-input
          v-else
          v-model="interest.hobby_tag"
          @blur="() => updateInterestTag(interest)"
          @keyup.enter="() => updateInterestTag(interest)"
      />
    </el-tag>
    <div class="new-tag-input">
      <el-input v-model="newInterest" placeholder="输入新兴趣" @keyup.enter="addInterestTag" />
      <el-button type="primary" @click="addInterestTag">
        <el-icon><Plus /></el-icon>
        添加
      </el-button>
    </div>
  </div>
</template>


<style scoped lang="less">
.interest-tags {
  width: 400px;
  margin: 20px auto;
  text-align: left;

  h3 {
    margin-bottom: 20px;
  }

  .el-tag {
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;

    .el-input {
      width: 100px;
    }
  }

  .new-tag-input {
    display: flex;
    align-items: center;
    margin-top: 10px;

    .el-input {
      flex-grow: 1;
      margin-right: 10px;
    }
  }
}
</style>
